<script setup lang="ts">
import { NInput, NButton } from 'naive-ui'
import { ref } from 'vue'

withDefaults(
  defineProps<{
    showUpdateFile: boolean
  }>(),
  {
    showUpdateFile: true
  }
)

defineEmits<{
  (event: 'add:group', title: string | null): void
  (event: 'add:file', filename: string | null): void
  (event: 'update:file'): void
}>()

const groupTitle = ref<string | null>(null)
const filename = ref<string | null>(null)
const handleValidateForm = () => document.dispatchEvent(new Event('form-preview:submit'))
</script>

<template>
  <div class="dynamic-form-config__handles">
    <div class="dynamic-form-config__handles__handle">
      <NInput
        v-model:value="groupTitle"
        placeholder="分组标题（可选）"
      />
      <NButton
        type="primary"
        @click="$emit('add:group', groupTitle)"
      >
        添加分组
      </NButton>
    </div>
    <div class="dynamic-form-config__handles__handle">
      <NInput
        v-model:value="filename"
        placeholder="文件名 (追加.json扩展名)"
      />
      <NButton
        type="primary"
        @click="$emit('add:file', filename)"
      >
        新建文件
      </NButton>
    </div>
    <div
      v-if="showUpdateFile"
      class="dynamic-form-config__handles__handle"
    >
      <NButton
        type="primary"
        style="flex: 1"
        @click="$emit('update:file')"
      >
        保存配置
      </NButton>
    </div>
    <div class="dynamic-form-config__handles__handle">
      <NButton
        type="primary"
        style="flex: 1"
        @click="handleValidateForm"
      >
        验证表单
      </NButton>
    </div>
  </div>
</template>

<style scoped>
.dynamic-form-config__handles {
  position: fixed;
  right: 50px;
  bottom: 50px;
  display: flex;
  flex-direction: column;
  gap: 10px 0;
}

.dynamic-form-config__handles__handle {
  display: flex;
  gap: 0 10px;
}
</style>
